<template>
  <div class="detail">
   <nb @titleClick="handleTitleClick" ref="navBar"></nb>
    <scroll class="content" ref="scroll"

    @scroll="handleContentScroll"
    :probeType="3"
    >
      <itemSwiper :banner="banner"></itemSwiper>
      <base-detail-info :baseInfo = "baseInfo" class="baseInfo"></base-detail-info>
      <base-shop-info :shopInfo = "shopInfo"></base-shop-info>
      <base-goods-info :detailInfo ="detailInfo" @imgIsloaded="handleImgLoaded"></base-goods-info>
      <base-params-info :paramsInfo="paramsInfo" ref="paramsInfo"></base-params-info>
      <base-comment-info :commentInfo="commentInfo" ref="commentInfo"></base-comment-info>
      <goods-list :goods="recommend" ref="recommendInfo"></goods-list>
    </scroll>
    <base-bottom-bar @addGoodsToCart="handleAddToCart"></base-bottom-bar>
    <backTop @click.native="handleBackTop" v-show="backTopShow"></backTop>
    <toast ref="toast"></toast>
  </div>
</template>

<script>
  import nb from './detailCpm/navbar.vue'
  import baseDetailInfo from './detailCpm/baseDetailInfo.vue'
  import baseShopInfo from './detailCpm/detailShopInfo.vue'
  import baseGoodsInfo from './detailCpm/detailGoodInfo.vue'
  import baseParamsInfo from './detailCpm/detailParamsInfo.vue'
  import baseCommentInfo from './detailCpm/detailCommentInfo.vue'
  import baseBottomBar from './detailCpm/DetailBottomBar.vue'

  import itemSwiper from './detailCpm/ItemSwiper.vue'
  import { getDetailData,goodsBaseInfo,goodsShopInfo,goodsParamsInfo,getRecommend } from 'network/detail.js'
  import scroll from 'components/common/scroll/scroll.vue'
  import goodsList from 'components/context/goods/goods.vue'
  import toast from 'components/common/toast/toast.vue'
  import { backTopminxin } from 'common/mixin.js'
  import {mapActions} from 'vuex'
  export default {
    name:'detail',
    data(){
      return {
        iid:null,
        banner:[],
        baseInfo:{},
        shopInfo:{},
        detailInfo:{},
        paramsInfo:{},
        commentInfo:{},
        recommend:[],
        //用于保存每个子组件到顶部的距离
        arrScrollY:[0,1000,2000,2500],
        db:Function,
        //记录滚动到的标记
        CurrentIndex:0,

      }
    },
    created(){

      this.iid = this.$route.params.iid
      //根据iid请求详情页数据
      this._getDetailData(this.iid)
      // 请求推荐详情推荐数据
      getRecommend().then(res=>{
        console.log(res.data.data.list)
       this.recommend = res.data.data.list

      })
    },
    mixins:[backTopminxin],
    components:{
      nb,
      itemSwiper,
      baseDetailInfo,
      scroll,
      baseShopInfo,
      baseGoodsInfo,
      baseParamsInfo,
      baseCommentInfo,
      goodsList,
      baseBottomBar,

    },
    mounted(){
      this.db = this.debounce(()=>{
        this.arrScrollY=[]
        this.arrScrollY.push(0);
        this.arrScrollY.push(this.$refs.paramsInfo.$el.offsetTop)
        this.arrScrollY.push(this.$refs.commentInfo.$el.offsetTop)
        this.arrScrollY.push(this.$refs.recommendInfo.$el.offsetTop)
        console.log(this.arrScrollY)
      },500)
    },
    methods:{
      ...mapActions(['addCart']),
      _getDetailData(iid){
        getDetailData(iid).then(res=>{
          const result = res.data.result
          console.log(result)
          // 取出轮播图
          this.banner = result.itemInfo.topImages
          // 创建baseInfo 实例 主要是让零散的信息集中管理
          this.baseInfo = new goodsBaseInfo(result.itemInfo,result.columns,result.shopInfo.services)
          // 创建goodsShopInfo的实例
          this.shopInfo = new goodsShopInfo(result.shopInfo)
          // 保存店铺详情
          this.detailInfo = result.detailInfo
          // 创建paramsInfo的实例
          this.paramsInfo = new goodsParamsInfo(result.itemParams.info,result.itemParams.rule)
          // 创建评论对象
          if(result.rate && result.rate.list.length>0){
            this.commentInfo = result.rate.list[0]
          }

        })
      },
      debounce(fn,delay){
        let timer = null
        return function(...args){
          if(timer) clearTimeout(timer);
          timer = setTimeout(()=>{
            fn.apply(this,arguments)
          },delay)
        }
      },
      handleTitleClick(e){
        const index= e.index
        this.$refs.scroll.bs.scrollTo(0,-this.arrScrollY[index],1000)

      },
      handleImgLoaded(){
        this.db()
      },

      //监听滚动的位置
      handleContentScroll(options){
        const positionY = -options.y
        // 和arrScrollY 中的值进行对比
        // 根据 positionY 属于0~x的区间决定 index
        // for(let i in this.arrScrollY)
        // for...in 循环 i 的类型是字符串类型 直接用会出错 要用的话就要转类型
        const length = this.arrScrollY.length
        // 判断当 i = length-1 时 positionY是否大于数组最后一项，
       for(let i =0;i<length;i++){
         if(this.CurrentIndex !=i && (i<length-1&&positionY>=this.arrScrollY[i]&&positionY<this.arrScrollY[i+1]||
           i==length-1 && positionY>this.arrScrollY[i])
         ){
           this.CurrentIndex = i
           this.$refs.navBar.currentIndex = this.CurrentIndex
         }
       }
        this.backTopShow = Math.abs(options.y)>1000
      },
      // 添加商品到购物车
      handleAddToCart(){
        // 获取购物车需要展示的信息
        const product ={}
        product.image= this.banner[0]
        product.title = this.baseInfo.title
        product.desc = this.baseInfo.desc
        product.price = this.baseInfo.newPrice
        product.iid = this.iid
        product.isChecked = true
        // 将商品加入到购物车

        // this.$store.commit('addCart',product)
        // 利用actions 分发事件，实行单一职责功能
        //this.$store.dispatch('addCart',product)
        this.addCart(product).then(v=>{
          this.$refs.toast.message(v)
        })
      }
    }
  }
</script>

<style scoped>

  .baseInfo{
    margin-top:10px;
  }
  .content{
      overflow:hidden;
      position: absolute;
      top:44px;
      left:0;
      right:0;
      bottom:49px;
      background-color:#fff;
      z-index: 99;
    }
</style>
